<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <div class="InsAppCollectEdit">
            <a-form :form="form">
                <a-form-item style="display:none">
                    <a-input v-decorator="['id']"/>
                </a-form-item>
                <a-row class="hearlist">
                    <a-col :span="12">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','应用名称')">
                            <a-input :placeholder="i18n('form.name','应用名称')"
                                     v-decorator="['name', {rules: [{required: true, message: i18n('form.name','应用名称','input')}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.sn','序号')">
                            <a-input-number :min="0" :max="1000000" :placeholder="i18n('form.sn','序号')"
                                            v-decorator="['sn', {rules: [{required: true, message: i18n('form.sn','序号','input')}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.type','类型')">
                            <a-radio-group v-model="type">
                                <a-radio v-if="appType!='custom'" value="interior">{{i18n('form.interior','内部')}}</a-radio>
                                <a-radio value="outside">{{i18n('form.outside','外部')}}</a-radio>
                                <a-radio value="link">{{i18n('form.link','链接')}}</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="type=='interior'">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.apply','应用')">
                            <rx-input-button v-model="mdl.app"  @click="openSystemAppDialog" ></rx-input-button>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="type=='outside'">
                      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.apply','应用')">
                        <rx-input-button v-model="mdl.clientId"  @click="openAuthAppDialog" ></rx-input-button>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="type=='link'">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.applyUrl','应用')">
                            <a-input  :placeholder="i18n('form.url','应用链接')"
                                      v-decorator="['url', {rules: [{required: type=='link', message: i18n('form.url','应用链接','input')}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <rx-icon v-if="isShowIcon" class="ins-app-rx-icon" @certainIcon="certainIcon" :system="system" :bgColor="bgColor" :icon="icon" :iconType="'custom'"></rx-icon>
                <a-row>
                    <a-col :span="24">
                        <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol" :label="i18n('form.description','描述')">
                            <a-textarea class="urlWidthClass" :placeholder="i18n('form.description','描述')"
                                        v-decorator="['description', {rules: [{required: false, message: i18n('form.description','描述','input')}]}]"
                                        :rows="4"/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </rx-dialog>
</template>
<script>
import InsAppCollectApi from '@/api/portal/core/insAppCollect'
import rxInputIcon from '@/components/rxComponent/rx-input-icon';
import {BaseForm, Dialog, RxDialog,Util,RxInputButton } from "@lowcode/jpaas-common-lib";
import AppDialog from "@/views/modules/portal/core/AppDialog";
import OauthClientDetailsDialog from "@/views/modules/auth/OauthClientDetailsDialog.vue";
import RxIcon from "@/components/rxComponent/rx-icon";

export default {
    name: 'InsAppCollectEdit',
    mixins: [BaseForm],
    components: {
        RxDialog,
        rxInputIcon,
        RxIcon,
        RxInputButton
    },
    props:["appType"],
    data() {
        return {
            icon: "{\"type\":\"jpaasIcon\",\"icon\":\"iconportal\"}",
            ownerId: "",
            bgColor:'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)',
            type:"outside",
            system:'lineage',
            isShowIcon:false
        }
    },
    methods: {
        i18n(name,text,key){
          return this.$ti18(name,text,"InsAppCollect",key);
        },
        certainIcon(icon,bgColor,system){
          this.iconColor = bgColor;
          this.icon = icon;
          this.system = system;
        },
        onload_(data) {
            if(data){
                if(data.ownerId){
                    this.ownerId = data.ownerId;
                }
                if(data.icon){
                    var iconfont =  JSON.parse(data.icon);
                    iconfont.icon = JSON.stringify({type:iconfont.type,icon:iconfont.icon});
                    if(iconfont.bgColor){
                        this.bgColor =  iconfont.bgColor;
                        this.icon = iconfont.icon;
                    }
                    this.certainIcon(iconfont.icon,iconfont.bgColor,iconfont.system);
                }
                if(data.type){
                    this.type = data.type;
                }
            }
            this.isShowIcon=true;
        },
        iconChange(icon){
            this.form.setFieldsValue({'icon':icon});
        },
        get(id) {
            return InsAppCollectApi.get(id);
        },
        save(values) {
            if (this.ownerId) {
                values.ownerId = this.ownerId;
            }
            var iconfont  ={
                type: JSON.parse(this.icon).type,
                icon: JSON.parse(this.icon).icon,
                bgColor:this.bgColor,
                system:this.system
            }
            this.$set(values,'icon',JSON.stringify(iconfont));
            if (this.type) {
                values.type = this.type;
            }
            values.app=this.mdl.app;
            values.clientId=this.mdl.clientId;
            values.appType="custom";
            return InsAppCollectApi.save(values);
        },
        openSystemAppDialog(vm){
            let self = this;
            var conf = {
                component: AppDialog,
                data: {},
                curVm: this,
                widthHeight: ['800px', '600px'],
                title: this.i18n('form.selAppTitle','选择应用')
            }
            Util.open(conf, function (action,data) {
                if (action != 'ok') return;
                vm.setVal(data.key,self.$i18(data.name));
            });
        },
        openAuthAppDialog(vm){
          let self = this;
          var conf = {
            component: OauthClientDetailsDialog,
            data: {},
            curVm: this,
            widthHeight: ['800px', '600px'],
            title: this.i18n('form.selAppTitle','选择应用')
          }
          Util.open(conf, function (action,data) {
            if (action != 'ok') return;
            vm.setVal(data.clientId,data.clientName);
          });
        }

    }
}
</script>
<style scoped>
.ins-app-rx-icon{
   margin-bottom: 20px;
}
.InsAppCollectEdit{
    margin-right:30px;
}
.onchange{
    border:none;
}
.hearlist {
    margin-top: 20px;
}

.widthClass {
    width: 80%;
}

.urlWidthClass {
    width: 100%;
}
</style>